<template>
	<div>
		<div class="header_box">
			<div class="tx_img">
				<img src="../assets/bg.png"/>
			</div>
			<div class="header_message_box">
				<div class="header_message_name">Esvian</div>
				<div class="header_message_id">id:10086</div>
			</div>
		</div>
		
		<div class="itemimgs">
			<div class="item"><img src="../assets/理财.png" alt="">待付款</div>
			<div class="item"><img src="../assets/货车.png" alt="">待收货</div>
			<div class="item"><img src="../assets/扳手.png" alt="">退换修</div>
		</div>
		
		<div class="tab">我的地址</div>
		<div class="tab">个人资料</div>
		<div class="tab">我的订单</div>
		<div class="tab">我的收藏</div>
		<div class="tab">浏览历史</div>
		<div class="tab">联系客服</div>
		<div class="tab">更多内容</div>
		<div class="tab">设置</div>
		
		<div class="kong"></div>
	</div>
</template>

<script>
	export default {
	  name: 'minepage',
	}
</script>

<style scoped>
.kong{
	height: 3.4rem;
}
.header_box{
	display: flex;
	flex-direction: row;
	width: 97%;
	height: 4rem;
	border-top: 0.0625rem solid gainsboro;
	border-bottom: 0.0625rem solid gainsboro;
	/* border: 1px saddlebrown solid; */
}
.tx_img{
	margin-top: 0.6rem;
	margin-left: 0.6rem;
}
.tx_img img{
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
}
.header_message_box{
	margin-top: 0.6rem;
	margin-left: 0.6rem;
}
.header_message_name{
	font-size: 1.5rem;
}
.header_message_id{
	font-size: 0.8rem;
	color: darkgrey;
}
.itemimgs{
	display: flex;
	flex-direction: row;
	margin-top: 1rem;
	margin-bottom: 0.6rem;
}
.item{
	width: 33%;
	display: flex;
	flex-direction: column;
}
.item img{
	width: 3.125rem;
	height: 3.125rem;
	margin: auto;
}
.tab{
	width: 97%;
	height: 3rem;
	line-height: 3rem;
	text-align: left;
	border-top: 0.0625rem solid gainsboro;
}
</style>